// 1. 初始数据
const data = [
    {url: '../img/hongshaorou.webp', title: '红烧肉', color: '#b48f72'},
    {url: '../img/gongbaojiding1.webp', title: '宫保鸡丁', color: '#524844'},
    {url: '../img/yuxiangrousi.webp', title: '鱼香肉丝', color: '#26282c'},
    {url: '../img/tangculiji.webp', title: '糖醋里脊', color: '#9499a2'},
    {url: '../img/mapodoufu.jpg', title: '麻婆豆腐', color: '#616d77'},
    {url: '../img/baiqieji.webp', title: '白切鸡', color: '#3d5d68'},
]
const img = document.querySelector(".slider-wrapper img");
const p = document.querySelector(".slider-footer p")
const footer = document.querySelector(".slider-footer")

const next = document.querySelector('.next');
let i = 0;
//前进
next.addEventListener('click', function () {
    i++
    i = i >= data.length ? 0 : i;
    toggle()
})
//后退
const prev = document.querySelector('.prev');
prev.addEventListener('click', function () {
    i--;
    i = i < 0 ? data.length - 1 : i;
    toggle();
})


//定时器，自动切换图片
let timeId = setInterval(function () {
    next.click();
}, 1000);
//鼠标进入轮播区域，清除定时器
const slider = document.querySelector('.slider');
slider.addEventListener('mouseenter', function () {
    clearTimeout(timeId);
})
//鼠标移出轮播区域，重新设置定时器
slider.addEventListener('mouseleave', function () {
    clearInterval(timeId);
    timeId = setInterval(function () {
        next.click();
    }, 1000);
})

// 切换显示内容的函数
function toggle() {
    img.src = data[i].url;
    p.innerHTML = data[i].title;
    footer.style.backgroundColor = data[i].color;
    document.querySelector('.slider-indicator .active').classList.remove('active');
    document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}

//选项卡点选中
const li = document.querySelectorAll('.slider-indicator li');
for (let j = 0; j < li.length; j++) {
    li[j].addEventListener('mousemove', function () {
        // 移除之前激活的指示点，并激活当前点击的指示点
        document.querySelector('.slider-indicator .active').classList.remove('active');
        this.classList.add('active');
        // 更新显示内容和当前索引
        img.src = data[this.value].url;
        p.innerHTML = data[this.value].title;
        footer.style.backgroundColor = data[this.value].color;
        i = this.value;
    })
}

const jump = document.querySelectorAll("#top>ul>li");
const href = [
    "subpage1.html",
    "subpage2.html",
    "../index.html",
]
console.log(jump)
for (let i = 0; i < jump.length; i++) {
    jump[i].addEventListener('click', function () {
        window.location.href = href[i];
    })
}